
<template>
    <div class="all">
        <!-- 地图板块 -->
        <vc-viewer @ready="onViewerReady" @left-down="onLeftClick">
            <!-- 多边形 -->
            <vc-primitive v-for="item in pageUseList" :key="item.id" :appearance="item.appearance" :show="item.show"
                @click="onClicked($event, item)">
                <vc-geometry-instance>
                    <vc-geometry-polygon :polygonHierarchy="item.polygonHierarchy" :height="0"
                        :extrudedHeight="30"></vc-geometry-polygon>
                </vc-geometry-instance>
            </vc-primitive>
            <!-- html公告板 -->
            <template v-if="pageUseList[0].center" :offset="[100,100]">
                <vc-overlay-html ref="html" v-for="item in pageUseList" :key="item.id"
                    :position="[item.center[0], item.maxWd]" :show="item.show">
                    <!-- <div class="demo">aa</div> -->
                    <Direction />
                </vc-overlay-html>
            </template>
        </vc-viewer>
        <!-- 顶部logo -->
        <div class="top">
            <el-button type="primary" class="btn" @click="centerDialogVisible = true">新建场景</el-button>
        </div>
        <!-- 左侧列表 -->
        <div class="left">
            <div class="title">任务场景</div>
            <el-table :data="pageUseList" style="width: 100%">
                <el-table-column width="30">
                    <template #default="scope">
                        <!-- {{ scope.row.show ? '是' : '否' }} -->
                        <el-checkbox v-model="scope.row.show" size="large" />
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="场景名称" />
                <el-table-column prop="name" label="场景类型" />
                <el-table-column prop="cjsj" label="创建时间" width="120" />
                <el-table-column prop="cjr" label="创建人" />


            </el-table>
        </div>
        <div class="buttom">
            <Chart :ganntData="ganntData" />
        </div>
        <div class="right">
            <Dendritical @setData="setData" />
        </div>
        <!-- 弹出层 -->
        <el-dialog v-model="centerDialogVisible" title="任务场景" width="70%" align-center>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="场景名称" width="180" />
                <el-table-column prop="name" label="场景类型" width="180" />
                <el-table-column prop="address" label="地图级别" />
                <el-table-column prop="mrcj" label="默认场景">
                    <template #default="scope">
                        {{ scope.row.mrcj ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="jssj" label="结束时间" />
                <el-table-column prop="cjr" label="创建人" />
                <el-table-column prop="zt" label="状态">
                    <template #default="scope">
                        {{ scope.row.zt === '1' ? '在线' : '离线' }}
                    </template>
                </el-table-column>
                <el-table-column label="" width="250">
                    <template #header>
                        操作 <el-button type="primary" @click="innerVisible = true" style="margin-left: 30px;">新增</el-button>
                    </template>
                    <template #default="scope">
                        <div class="btn">
                            <div class="upd">修改</div>
                            <div class="del" @click="delCj(scope)">删除</div>
                            <div class="fx" @click="innerVisible3 = true">分享</div>
                            <!-- <div>同步</div> -->
                        </div>
                    </template>
                </el-table-column>

            </el-table>

            <el-dialog v-model="innerVisible" width="30%" title="新建场景" append-to-body>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="场景名称">
                        <el-input v-model="form.name" />
                    </el-form-item>
                    <el-form-item label="选择子场景">
                        <el-radio-group v-model="form.zcj">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="子场景" v-show="form.zcj">
                        <el-select v-model="form.zcjList" multiple placeholder="选择子场景" style="width:100%">
                            <el-option v-for="(item, index) in tableData" :key="index" :label="item.date"
                                :value="item.date" />
                        </el-select>
                        <!-- <div class="childCj">
                            <div class="list">
                                <div class="item" v-for="(item, index) in childCj" :key="index">
                                    <span>{{ item.date }}</span>
                                    <el-icon @click="delItem(index)">
                                        <Close />
                                    </el-icon>
                                </div>
                            </div>
                            <el-button type="primary" @click="innerVisible2 = true">选择场景</el-button>
                        </div> -->
                    </el-form-item>
                    <el-form-item label="场景类型">
                        <el-select v-model="form.cjlx" class="m-2" placeholder="选择场景类型" style="width:100%">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="场景状态">
                        <el-select v-model="form.cjzt" class="m-2" placeholder="选择场景状态" style="width:100%">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="有效时间">
                        <el-date-picker v-model="form.yxsj" type="datetimerange" range-separator="至"
                            start-placeholder="选择开始时间" end-placeholder="选择结束时间" style="width:100%" />
                    </el-form-item>
                    <el-form-item label="中心位置">
                        <div class="zxwz">
                            <el-input v-model="form.zxjd" placeholder="中心点精度" style="width:45%;margin-right:10%;" />
                            <el-input v-model="form.zxwd" placeholder="中心点维度" style="width:45%" />
                        </div>
                    </el-form-item>
                    <el-form-item label="地图级别">
                        <el-input-number v-model="form.dtjb" :min="1" :max="19" />
                    </el-form-item>
                    <el-form-item label="是否默认">
                        <el-radio-group v-model="form.sfmr">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-dialog v-model="innerVisible2" width="80%" title="选择场景" append-to-body>
                    <div class="select">
                        <label> 场景名称:</label>
                        <el-input v-model="cjmc" placeholder="输入场景名称" style="width:30%" />
                        <label style="margin-left: 10px;"> 场景类型:</label>
                        <el-select v-model="cjlx" class="m-2" placeholder="选择场景类型">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <el-button type="primary" style="margin-left: 10px;">
                            查询
                        </el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%" @selection-change="selectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="date" label="场景名称" width="180" />
                        <el-table-column prop="name" label="场景类型" width="180" />
                        <el-table-column prop="address" label="地图级别" />
                        <el-table-column prop="mrcj" label="默认场景">
                            <template #default="scope">
                                {{ scope.row.mrcj ? '是' : '否' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="jssj" label="结束时间" />
                        <el-table-column prop="cjr" label="创建人" />
                        <el-table-column prop="zt" label="状态">
                            <template #default="scope">
                                {{ scope.row.zt === '1' ? '在线' : '离线' }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="display: flex; justify-content: flex-end;margin-top: 30px;">
                        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="innerVisible2 = false">取消</el-button>
                            <el-button type="primary" @click="innerVisible2 = false">
                                确定
                            </el-button>
                        </span>
                    </template>

                </el-dialog>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="innerVisible = false">取消</el-button>
                        <el-button type="primary" @click="innerVisible = false">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog v-model="innerVisible3" width="30%" title="分享人员" append-to-body>
                <el-tree :data="dataSource" node-key="id" default-expand-all :expand-on-click-node="false">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                            <span v-if="node.level === 1">{{ node.label }}</span>
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio v-if="node.level === 2" :label="node.id" size="large">{{ node.label }}</el-radio>
                                <!-- <el-radio label="2" size="large">Option 2</el-radio> -->
                            </el-radio-group>

                            <!-- <span>
                                <a @click="append(data)"> Append </a>
                                <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
                            </span> -->
                        </span>
                    </template>
                </el-tree>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="innerVisible = false">取消</el-button>
                        <el-button type="primary" @click="innerVisible = false">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template> -->
        </el-dialog>
    </div>
</template>
    
<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue'
import * as turf from '@turf/turf'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Close
} from '@element-plus/icons-vue'
import { getCentroid } from "@/utils/centroid"
import Chart from '../gannt'
const onViewerReady = ({ Cesium, viewer }) => {
    console.log('onViewerReady')
}
import Direction from "@/components/Direction"
import Dendritical from "@/components/Dendritical"

//弹出层
const innerVisible = ref(false)
const innerVisible2 = ref(false)
const innerVisible3 = ref(false)
//分享人员模拟数据
const dataSource = ref([
    {
        id: 1,
        label: 'A部门',
        children: [
            {
                id: 4,
                label: '张xx',
            },
            {
                id: 9,
                label: '杜xx',
            },
        ],
    },
    {
        id: 2,
        label: 'B部门',
        children: [
            {
                id: 5,
                label: '王xx',
            },
            {
                id: 6,
                label: '李xx',
            },
            {
                id: 7,
                label: '赵xx',
            },
            {
                id: 8,
                label: '刘xx',
            },
        ],
    },
])
//单选
const radio1 = ref("");
//表单
const form = reactive({
    name: "",
    zcj: false,
    zcjList: [],
    cjlx: "",
    cjzt: "",
    yxsj: [],
    zxjd: "",
    zxwd: "",
    dtjb: 3,
    sfmr: false,
})
//传递给甘特图组件的数据
const ganntData = ref([]);
//子场景集合
const childCj = ref([]);
//场景模拟数据
const tableData = ref([
    {
        date: '场景一',
        name: '作战方向',
        address: '10',
        mrcj: true,
        cjsj: "2023-05-03",
        jssj: "2023-05-04",
        cjr: "管理员",
        zt: "1"
    },
    {
        date: '场景二',
        name: '作战方向',
        address: '10',
        mrcj: true,
        cjsj: "2023-05-03",
        jssj: "2023-05-04",
        cjr: "管理员",
        zt: "1"
    },
    {
        date: '场景三',
        name: '作战方向',
        address: '10',
        mrcj: false,
        cjsj: "2023-05-03",
        jssj: "2023-05-04",
        cjr: "管理员",
        zt: "2"
    }
])
//html告示板
const htmlObj = reactive({
    show: false,
    position: [],
})
const setData = (data) => {
    console.log('--------352', data);
    ganntData.value = data;
}
const onLeftClick = (e) => {
    console.log(e);
    htmlObj.show = false;
}
const cjmc = ref("");
const cjlx = ref("");


const options1 = [
    {
        value: 'zzfx',
        label: '作战方向',
    },
]
const options2 = [
    {
        value: 'zc',
        label: '正常',
    },
    {
        value: 'yc',
        label: '异常',
    },
]
const centerDialogVisible = ref(false);
const onClicked = (e, item) => {
    // console.log(e, '59---', item)
    getCentroid(item.polygonHierarchy);
    htmlObj.show = true;
}
const selectionChange = (list) => {
    console.log("000000000000", list);
    childCj.value = list;
}
const delCj = (row) => {
    ElMessageBox.confirm(
        '确定删除该场景?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            tableData.value.splice(row.$index, 1);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}
const delItem = (i) => {
    childCj.value.splice(i, 1);
}
const appearance = ref({
    type: 'MaterialAppearance',
    options: {
        material: 'red'
    }
})
onMounted(() => {
    // var polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]);
    // var centroid = turf.centroid(polygon);
    pageUseListUtil();
})

const pageUseList = reactive([
    {
        id: 0,
        show: false,
        date: "场景一",
        name: "作战方向",
        cjsj: "2023-05-03",
        cjr: "管理员",
        polygonHierarchy: [
            { lng: 102.1, lat: 29.5 },
            { lng: 106.2, lat: 29.5 },
            { lng: 106.2, lat: 33.5 },
            { lng: 108.2, lat: 35.5 },
            { lng: 102.1, lat: 33.5 }
        ],
        appearance: {
            type: 'MaterialAppearance',
            options: {
                material: 'red'
            }
        }
    },
    {
        id: 1,
        show: true,
        date: "场景二",
        name: "作战方向",
        cjsj: "2023-05-03",
        cjr: "管理员",
        polygonHierarchy: [
            { lng: 105.1, lat: 30.5 },
            { lng: 107.2, lat: 30.5 },
            { lng: 113.2, lat: 33.5 },
            { lng: 115.2, lat: 35.5 },
            { lng: 113.1, lat: 33.5 }
        ],
        appearance: {
            type: 'MaterialAppearance',
            options: {
                material: 'green'
            }
        }
    }
])
//处理多边形数据
const pageUseListUtil = () => {
    pageUseList.forEach(obj => {
        obj.center = getCentroid(obj.polygonHierarchy).geometry.coordinates;
        let wdList = []
        obj.polygonHierarchy.forEach(item => {
            wdList.push(item.lat)
        })
        obj.maxWd = Math.max(...wdList);
    })
    console.log('------------466', pageUseList);
}
const vertexFormat = ref(null)

</script>
<style lang="scss" scoped>
.all {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.btn {
    display: flex;
    justify-content: space-between;

    .upd {
        padding: 3px 15px;
        background-color: #fef5e8;
        border-radius: 30px;
        color: #ffb648;
        cursor: pointer;
    }

    .del {
        padding: 3px 15px;
        background-color: #fdedec;
        border-radius: 30px;
        color: #f62464;
        cursor: pointer;
    }

    .fx {
        padding: 3px 15px;
        background-color: #edf1fc;
        border-radius: 30px;
        color: #5887ff;
        cursor: pointer;
    }
}

.top {
    position: absolute;
    top: 0;
    background-image: url("@/assets/images/top.png");
    width: 100%;
    height: 80px;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30px;
    // .btn{

    // }
}

.left {
    position: absolute;
    left: 0;
    top: 300px;
    width: 400px;
    background-color: #ffffff;
    text-align: center;
}

.buttom {
    position: absolute;
    bottom: 0;
    width: calc(100% - 10px);
    margin: 5px;
}

.demo {
    width: 100px;
    height: 100px;
    background-color: red;
}

.zxwz {
    display: flex;
    width: 100%;
}

.select {
    display: flex;
    align-items: center;
}

.childCj {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .list {
        .item {
            display: flex;
            align-items: center;

            span {
                margin-right: 50px;
            }

            i {
                cursor: pointer;
            }
        }
    }
}
</style>
<style>
.el-dialog__header {
    text-align: center;
    border-bottom: 1px #dddddd solid;
}

.el-dialog__title {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
}
</style>
<style>
html {
    overflow: hidden;
}
</style>